<template>
     <div style="position: absolute;">
     <yingyue/>
  </div>
  <div class="common-layout">
    <el-container>
      <el-aside :class="isCollapse?'box2':'box1'">
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px; width: 100%;">
      <el-radio-button v-show="isCollapse" :label="false" style="margin: auto; "><el-icon><Expand /></el-icon></el-radio-button>
      <el-radio-button v-show="!isCollapse" :label="true" style="margin: auto;"><el-icon><Fold /></el-icon></el-radio-button>
    </el-radio-group>
    <el-menu
      :default-active="gaoliang.toString()"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
    >
    <el-menu-item index="1" @click="ck('shouye','首页')">
        <el-icon><location /></el-icon>
        <template #title > 首页</template>
      </el-menu-item>
      <el-menu-item index="2" @click="ck('yonghugaunli','用户管理')">
        <el-icon><icon-menu /></el-icon>
        <template #title>用户管理</template>
      </el-menu-item>
      <el-menu-item index="3" @click="ck('yulanye','账户管理')">
        <el-icon><document /></el-icon>
        <template #title>账户管理</template>
      </el-menu-item>
      <el-menu-item index="4" disabled>
        <el-icon><setting /></el-icon>
        <template #title>暂时未开发</template>
      </el-menu-item>
    </el-menu>
        </el-aside
      >
      <el-container>
        <el-header style=" width: 100%; min-height: 2vh;background-color: rgb(163, 217, 232);">
          <div style="">
            <el-breadcrumb separator=">">
            <el-breadcrumb-item  v-for="item,index in data1" :key="index"> <p  :class="(gaoliang1==index)?'p2':'p1'" @click="ck(item.id,item.name)">{{item.name}}</p></el-breadcrumb-item>
          </el-breadcrumb>
          </div>
          
        </el-header>
        <el-main>
             <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import yingyue from '../guanli/yingyue.vue'
import { computed, inject,onMounted } from "vue";
import { useRoute,useRouter } from "vue-router";
import { ref,reactive } from 'vue'
import {Document, Menu as IconMenu,Location,Setting,Fold,Expand} from '@element-plus/icons-vue'

export default {
  beforeRouteEnter(to, from, next) {
  if (!JSON.parse(localStorage.getItem("vuex")).apprrr) {
     next({name:'home'})
  } else {
    next();
  }
},
  setup() {
    // 控制高亮
    
    let data=[{id:"shouye",name:"首页"},{id:"yonghugaunli",name:"用户管理"},{id:"yulanye",name:"账户管理"}]
    let data1=reactive([{id:"shouye",name:"首页"}])
    const router1 = useRoute();
    const router = useRouter();
    // console.log(router.query.id);
    const store = inject("store");
    // console.log(store.state);
    const count = computed(() => store.state.count);
    // 菜单高量
    const gaoliang=computed(() => store.state.gaoliang)
    // 面包屑高量
    const gaoliang1=ref(1)
    const increment = () => {
      store.commit("increment");
    };
    //ck点击跳转路由
    function ck(e,l){
      // e是id，l是name,l下标值
      // find判断是否有值有返回本身没有返回undefined
       const user = data1.find((u) => u.name == l);
      //  console.log(user);
      if (user==undefined) {
        let shu={id:e,name:l}
        data1.push(shu);
      }
      // 找到该值返回其下标
      let i=data.findIndex((el) => el.name === l)
      gaoliang1.value=data1.findIndex((el) => el.name === l)
      store.commit('gaolioangfangfa',i+1)
      router.push({name:e})
    }
    const incrementAsync = () => {
      store.dispatch("incrementAsync");
    };
    const isCollapse = ref(true)
  const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
  }
  const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
  }
  onMounted(()=>{
          let shu=data[gaoliang.value-1]
          ck(shu.id,shu.name)
          // console.log(1);
        })
    return {
      count,
      isCollapse,
      data1,gaoliang,gaoliang1,
         ck,
      increment,
      incrementAsync,
      handleOpen,
      handleClose
    };
  },
  //生命周期
  created() {},
  //生命周期
  mounted() {
   
  },
  //注册组件
  components: {
    yingyue,
    Document,
    IconMenu,
    Location,
    Setting,
    Fold,
    Expand
  },
};
</script>
<style lang='less' scoped>
.p1{
  color: #000;
}
.p2{
  color: #fff;
}
.box2{
        width: 7vw;
        min-height: 100vh;
        background-color: rgb(108, 154, 224);
}
.box1{
        width: 12vw;
        min-height: 100vh;
        background-color: rgb(108, 154, 224);
}
.el-header {
    --el-header-padding: 20px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 110px;
    min-height: 400px;
  }
  .el-menu {
    border-right:none;
    list-style: none;
    position: relative;
    margin: 0;
    padding-left: 0;
    background-color: rgb(108, 154, 224);
    box-sizing: border-box;
}

.el-menu-item.is-active{
  color: #fff;
}
.el-menu-item:hover{
  background-color: rgb(108, 154, 224);
}
/deep/.el-radio-button__inner {
    background-color: rgb(108, 154, 224) !important;
    border-color: rgb(108, 154, 224) !important;
    padding: 13px 15px !important;
    font-size:30px !important;
}
.el-radio-button:hover .el-icon {
  color: black;
}
</style>
